<%@ page pageEncoding="UTF-8"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link href="/zkl/static/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="/zkl/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/zkl/static/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css"/>
    <link href="/zkl/static/blog/css/blog.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="/zkl/static/jquery/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="/zkl/static/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/zkl/static/vue/vue.min.js"></script>
  </head>
  <body>
  <!-- 导航栏 -->
  <nav class="navbar navbar-default navbar-fixed-top">
  	<div class="container">
  	    <div class="navbar-header"> 
            <a class="navbar-brand" href="#">blog</a> 
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target="#example-navbar-collapse">
            	<span class="sr-only">切换导航</span>
            	<span class="icon-bar"></span>
            	<span class="icon-bar"></span>
            	<span class="icon-bar"></span>
        	</button>
        </div> 
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
        <ul class="nav navbar-nav navbar-right"> 
            <li name="navs" class="active"><a href="../login/index"><span class="glyphicon glyphicon-home"></span> 主页</a></li> 
            <li name="navs" ><a  href="javascript:aaa();"><span class="glyphicon glyphicon-book"></span> 日志</a></li> 
            <li name="navs" ><a  href="javascript:aaa();"><span class="glyphicon glyphicon-fire"></span> 案列</a></li>
            <li name="navs" ><a  href="javascript:aaa();"><span class="fa fa-handshake-o"></span> 服务</a></li>
            <li name="navs" ><a  href="javascript:aaa();"><span class="fa fa-gamepad"></span> 小游戏</a></li>
            <li name="navs" ><a  href="javascript:aaa();"><span class="glyphicon glyphicon-comment"></span> 留言</a></li>
            <li name="navs" ><a  href="javascript:aaa();"><span class="glyphicon glyphicon-question-sign"></span> 关于我</a></li> 
        </ul> 
        </div>
  	</div>
   </nav>
  <!-- 轮播栏-->
  <div id="myCarousel" class="carousel slide" style="margin-top: 50px;">
	  <ol class="carousel-indicators">
	  	<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
	  	<li data-target="#myCarousel" data-slide-to="1"></li>
	  </ol>
	  <div class="carousel-inner">
		  <div class="item active" style="background-color: #84C1FF">
		  	<img alt="1" src="/zkl/static/image/lbt/lb01.jpg">
		  </div>
		  <div class="item" style="background-color:#84C1FF ">
		  	<img alt="2" src="/zkl/static/image/lbt/lb02.jpg">
		  </div>
	  </div>
	  
<!-- 	  <a href="#myCarousel" data-slide="prev" class="carousel-control left fontsize10">&lsaquo;</a>glyphicon glyphicon-chevron-left
	  <a href="#myCarousel" data-slide="next" class="carousel-control right fontsize10">&rsaquo;</a> -->
	  
	  <a href="#myCarousel" data-slide="prev" class="carousel-control left"><span class="glyphicon glyphicon-chevron-left"></span></a>
	  <a href="#myCarousel" data-slide="next" class="carousel-control right"><span class="glyphicon glyphicon-chevron-right"></span></a>
  </div>
  <!--面包屑 -->
  <div class="container">
		<div class="row">
				<ol class="breadcrumb">
				    <li class="active">Home</li>
					<!-- 
					<li class="active"><a href="#">Home</a></li>
				    <li><a href="#">2013</a></li>
				    <li >十一月</li> 
				    -->
				</ol>
		</div>
	</div>
  <!--内容栏-->
	<div class="container">
		<div class="row">
			<div class="col-md-8" >
				<div><h3>最新日志</h3></div>
				<div class="container-fluid" style="margin-top: 5px;background-color: #eee">
					<a href="#"><div class="row">
						<div class="col-md-5  col-xs-5" style="background-color: #eee">
							<img alt="" src="/zkl/static/image/wenzhang/a111.jpg" class="img-responsive" >
						</div>
						<div class="col-md-7 col-xs-7">
							<hgroup>
								<h3 class="article-title">一只小瓢虫</h3>
								<p class="message">这是一只可爱又漂亮的小瓢虫</p>
								<p class="note">时间：2016-01-20 19:30:20  点击：100  回复：10</p>
							</hgroup>
						</div>
					</div>
					</a>
				</div>
				<div class="container-fluid" style="margin-top: 5px;background-color: #eee">
					<a href="#"><div class="row">
						<div class="col-md-5  col-xs-5" style="background-color: #eee">
							<img alt="" src="/zkl/static/image/wenzhang/a222.jpg" class="img-responsive" >
						</div>
						<div class="col-md-7 col-xs-7">
							<hgroup>
								<h3 class="article-title">一只小瓢虫</h3>
								<p class="message">这是一只可爱又漂亮的小瓢虫</p>
								<p class="note">时间：2016-01-20 19:30:20  点击：100  回复：10</p>
							</hgroup>
						</div>
					</div>
					</a>
				</div>
								<div class="container-fluid" style="margin-top: 5px;background-color: #eee">
					<a href="#"><div class="row">
						<div class="col-md-5  col-xs-5" style="background-color: #eee">
							<img alt="" src="/zkl/static/image/wenzhang/a333.jpg" class="img-responsive" >
						</div>
						<div class="col-md-7 col-xs-7">
							<hgroup>
								<h3 class="article-title">一只小瓢虫</h3>
								<p class="message">这是一只可爱又漂亮的小瓢虫</p>
								<p class="note">时间：2016-01-20 19:30:20  点击：100  回复：10</p>
							</hgroup>
						</div>
					</div>
					</a>
				</div>
			</div>
			<div class="col-md-4">
				
				<div class="container-fluid"style="margin-top: 5px;">
				<div><h3>日志分类</h3></div>
					<div class="container-fluid"style="margin-top: 5px;background-color: #eee">
					装机
					</div>
					<div class="container-fluid"style="margin-top: 5px;background-color: #eee">
					java
					</div>
					<div class="container-fluid"style="margin-top: 5px;background-color: #eee">
					golang
					</div>
					<div class="container-fluid"style="margin-top: 5px;background-color: #eee">
					html5
					</div>
					<div class="container-fluid"style="margin-top: 5px;background-color: #eee">
					css3
					</div>
					<div class="container-fluid"style="margin-top: 5px;background-color: #eee">
					javascript
					</div>
					<div class="container-fluid"style="margin-top: 5px;background-color: #eee">
					linux
					</div>
					
				</div>
				<div class="container-fluid"style="margin-top: 5px;">
				
				<div><h3>最热资源</h3></div>
				<div class="container-fluid"style="margin-top: 5px;background-color: #eee">
				2342
				</div>
				<div class="container-fluid"style="margin-top: 5px;background-color: #eee">
				2342
				</div>
				<div class="container-fluid"style="margin-top: 5px;background-color: #eee">
				2342
				</div>
				</div>
				<div class="container-fluid"style="margin-top: 5px;">
					<div><h3>最新留言</h3></div>
					<div class="container-fluid"style="margin-top: 5px;background-color: #eee">
					2342
					</div>
					<div class="container-fluid"style="margin-top: 5px;background-color: #eee">
					2342
					</div>
					<div class="container-fluid"style="margin-top: 5px;background-color: #eee">
					2342
					</div>
				</div>
			</div>
			
			</div>
		</div>
	</div>
	<br>
	<footer id="footer" style="background-color: #eee">
		<div class="container" style="text-align: center;">
			<p>友情链接</p>
			<p>Build with JAVA · Based on bootstrap  © coder by G20</p>
			<p>
				<span class="fa fa-git"></span>&nbsp;&nbsp;
				<span class="fa fa-renren">&nbsp;&nbsp;
				<span class="fa fa-weibo">&nbsp;&nbsp;
				<span class="fa fa-weixin">&nbsp;&nbsp;
				<span class="fa fa-qq"></span>
			</p> 
		</div>
	</footer>


  </body>
  <script type="text/javascript">
  $(function(){
	  // 轮播时间
	  $("#myCarousel").carousel({
		  interval : 4000
	  });
	  
	  // 轮播图的轮播栏目
	 /*$(".carousel-control").css("line-height",$(".carousel-inner img").height()+"px")  ;
	  $(window).resize(function(){
		  var height= $(".carousel-inner img").eq(0).height() ||
		  $(".carousel-inner img").eq(1).height() ;
		  $(".carousel-control").css("line-height",height+"px")  ;
	  }); */
	  $('li[name=navs]').each(function(){
			 $(this).click(function(){
				 changeActive(this);
			 });
		 });
  });
  
  function changeActive(s){
	 $('li[name=navs]').each(function(){
		 $(this).removeClass("active");
	 });
	 $(s).addClass("active");
  }
  
  function aaa(){
	  
  }
  </script>
</html>